var HorizontalScroll = Base.extend(
{
    SMART_NAV: 'smart',
    CENTER_NAV: 'forceCentered',
    SMARTPHONE_MAX_WIDTH: 463,
    LARGE_DESKOP_MAX_WIDTH: 1183,
    TABLET_MAX_WIDTH: 751,
    DEFAULT_DESKOP: 1007,
    IE_LT_8: 8,

    _sly: null,
    _windowWidth: null,
    _leftArrow: null,
    _rightArrow: null,
    _firstTime: true,
    _winType: null,

    constructor: function()
    {
        this._leftArrow = $( '#leftArrow' );
        this._rightArrow = $( '#rightArrow' );
        this._windowWidth = $(window).width();
        this._winType = this._setWindType();
        this._setInitParamForSly();
        this._displayArrows();

        $(window).bind( 'resize', handler( this, '_onResize' ) );
        this._leftArrow.bind( 'click', handler( this, '_onClickLeftArrow') );
        this._rightArrow.bind( 'click', handler( this, '_onClickRightArrow') );
    },

    _setWindType: function()
    {
        var tempWinType = null;
        if ( ( this._windowWidth >= 0 ) && ( this._windowWidth <= this.SMARTPHONE_MAX_WIDTH ) )
        {
            tempWinType = "smartphone";
        }
        else if ( ( this._windowWidth > this.SMARTPHONE_MAX_WIDTH ) && ( this._windowWidth <= this.TABLET_MAX_WIDTH ) )
        {
            tempWinType = "tablet";
        }
        else if ( ( this._windowWidth > this.TABLET_MAX_WIDTH ) && ( this._windowWidth <= this.DEFAULT_DESKOP ) )
        {
            tempWinType = "default";
        }
        else if ( ( this._windowWidth > this.DEFAULT_DESKOP ) && ( this._windowWidth <= this.LARGE_DESKOP_MAX_WIDTH ) )
        {
            tempWinType = "large";
        }
        else
        {
            tempWinType = "largest";
        }
        return tempWinType;
    },

    _isIeLt8: function()
    {
        var ieV = jQuery.browser.version,
        ie = jQuery.browser.msie;
        return ie && ( ieV <= this.IE_LT_8 );
    },

    _setInitParamForSly: function()
    {
        if ( this._windowWidth > this.SMARTPHONE_MAX_WIDTH )
        {
            this._initSly( this.SMART_NAV );
        }
        else
        {
            this._initSly( this.CENTER_NAV );
        }
    },

    _initSly: function( navigation )
    {
        var drag = ( this._isIeLt8() ) ? 0 : 1;
        var frame = {
                horizontal: 1,
                itemNav: navigation,
                dragging: drag,
                scrollBy: 1,
                startAt: 0,
                elasticBounds: 0,
                speed: 500,
            	dragHandle: 1,
	            dynamicHandle: 1
            };
        this._sly = new Sly( $( '#frame' ), frame ).init();
        this._sly.reload();
    },

    _checkWindowSizeAndDestroySly: function()
    {
        this._sly.destroy();
        this._setInitParamForSly();
    },

    _onResize: function()
    {
        var tempWidth = $(window).width();
        if ( ( tempWidth != this._windowWidth ) || ( this._firstTime ) )
        {
            this._windowWidth = $(window).width();
            var tempWinType = this._setWindType();
            if ( ( tempWinType != this._winType )  || ( this._firstTime ) )
            {
                this._winType = tempWinType;
                this._displayArrows();
                this._checkWindowSizeAndDestroySly();
                var thisPtr = this;
                setTimeout( function() {thisPtr._sly.reload();}, 1000 );
            }
            this._firstTime = false;
        }
    },

    _onClickLeftArrow: function()
    {
        this._sly.prevPage();
    },

    _onClickRightArrow: function()
    {
        this._sly.nextPage();
    },

    _displayArrows: function()
    {
        if ( this._windowWidth >= this.LARGE_DESKOP_MAX_WIDTH )
        {
            this._hideArrows();
        }
        else
        {
            this._showArrows();
        }
    },

    _hideArrows: function()
    {
        this._leftArrow.css( 'display', 'none' );
        this._rightArrow.css( 'display', 'none' );
    },

    _showArrows: function()
    {
        this._leftArrow.css( 'display', 'block' );
        this._rightArrow.css( 'display', 'block' );
    }
});
